<template>
	<div class="star" :class="starType">
		<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
	</div>
</template>

<script type="text/ecmascript-6">
	const LENGTH = 5;
	const CLS_ON = 'on';
	const CLS_HALF = 'half';
	const CLS_OFF = 'off';

	export default {
		props: {
			size: {
				type: Number
			},
			score: {
				type: Number
			}
		},
		computed: {
			starType() {
				return 'star-' + this.size;
			},
			itemClasses() {
				let result = [];
				let score = Math.floor(this.score * 2) / 2;
				let hasDecimal = score % 1 !== 0;
				let integer = Math.floor(score);
				for (let i = 0; i < integer; i++) {
					result.push(CLS_ON);
				}
				if (hasDecimal) {
					result.push(CLS_HALF);
				}
				while (result.length < LENGTH) {
					result.push(CLS_OFF);
				}
				return result;
			}
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin.styl"
	
	.star 
		font-size: 0 
		.star-item 
			display: inline-block 
			background-repeat: no-repeat 
		&.star-48 
			.star-item 
				width: 20px 
				height: 20px 
				margin-right: 22px 
				background-size: 20px 20px 
				&.last-child 
					margin-right: 0 
				&.on 
					bg-image('star48_on') 
				&.half
					bg-image('star48_half') 
				&.off 
					bg-image('star48_off') 
		&.star-36 
			.star-item 
				width: 15px 
				height: 15px 
				margin-right: 6px 
				background-size: 15px 15px 
				&.last-child 
					margin-right: 0 
				&.on 
					bg-image('star36_on') 
				&.half 
					bg-image('star36_half') 
				&.off 
					bg-image('star36_off') 
		&.star-24 
			.star-item 
				width: 10px 
				height: 10px 
				margin-right: 3px 
				background-size: 10px 10px 
				&.last-child 
					margin-right: 0 
				&.on 
					bg-image('star24_on') 
				&.half 
					bg-image('star24_half') 
				&.off 
					bg-image('star24_off')
</style>
